<template>
  <div>
    <div class="box">
      <!-- 头 -->
      <van-nav-bar
        title="健康码"
        left-arrow
        :right-text="city"
        @click-left="onClickLeft"
        style="background-color: #1074ff"
      />
      <!-- 头下方的补充站位 -->
      <div class="textAd">
        <img src="/healthcode.png" alt="" />
      </div>
      <!-- 二维码卡片 -->
      <div class="healthCode">
        <h3>{{username }}</h3>
        <span>{{ nowTime }}</span>
        <div class="imgbox">
          <img v-if="img" src="/二维码green.png" alt="" />
          <!-- <img v-else-if="img == '2'" src="/二维码yellow.png" alt="" />
        <img v-else src="/二维码red.png" alt="" /> -->
        </div>
        <span
          >绿码:凭此码可在上海范围内通行,请主动出示，配合检查;并做好自身防护工作,码颜色将根据您的申报由当地政府按照相关政策动态更新,出行前请仔细检查您的健康码</span
        >
      </div>
      <!-- 底部文案 -->
      <div class="bottomText">
        <p>
          服务热线:0571-12345-6 <br />
          本服务由上海市人民政府提供
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      city: sessionStorage.getItem("mapcity"),
      img: "",
      nowTime: "",
      username: ''
    };
  },
  mounted() {
    this.nowTimes();
    // this.img = Math.ceil(Math.random() * 3) + "";
    // console.log(this.img);
    this.dite();
    this.getimg();
    this.getUserName()
  },
  methods: {
    dite() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
      });
    },
    getimg() {
      setTimeout(() => {
        this.img = "绿";
      }, 2100);
    },
    onClickLeft() {
      this.$router.push("/home");
    },

    timeFormate(timeStamp) {
      let year = new Date(timeStamp).getFullYear();
      let month =
        new Date(timeStamp).getMonth() + 1 < 10
          ? "0" + (new Date(timeStamp).getMonth() + 1)
          : new Date(timeStamp).getMonth() + 1;
      let date =
        new Date(timeStamp).getDate() < 10
          ? "0" + new Date(timeStamp).getDate()
          : new Date(timeStamp).getDate();
      let hh =
        new Date(timeStamp).getHours() < 10
          ? "0" + new Date(timeStamp).getHours()
          : new Date(timeStamp).getHours();
      let mm =
        new Date(timeStamp).getMinutes() < 10
          ? "0" + new Date(timeStamp).getMinutes()
          : new Date(timeStamp).getMinutes();
      let ss =
        new Date(timeStamp).getSeconds() < 10
          ? "0" + new Date(timeStamp).getSeconds()
          : new Date(timeStamp).getSeconds();
      this.nowTime =
        year + "-" + month + "-" + date + "" + " " + hh + ":" + mm + ":" + ss;
    },

    nowTimes() {
      this.timeFormate(new Date());
      setInterval(this.nowTimes, 1000);
      this.clear();
    },

    clear() {
      clearInterval(this.nowTimes);
      this.nowTimes = null;
    },
    // 获取用户名
    getUserName() {
      let uid = sessionStorage.getItem("uid");
      this.axios
        .get(`${this.$base}user/userinfo?id=${uid}`)
        .then((res) => {
          // console.log(res);
          this.username = res.data.data.username
        })
        .catch((err) => {});
    },
  },
};
</script>

<style scoped>
div /deep/ .van-nav-bar__title,
div /deep/ .van-icon-arrow-left {
  color: white;
}
::v-deep .van-nav-bar__text {
  color: white;
}

.van-hairline--bottom:after {
  border-bottom-width: 0px;
}
.box {
  width: 100vw;
  height: 100vh;
  background-color: #f8f8f8;
}
.textAd {
  width: 100vw;
  height: 15vh;
}
.textAd img {
  width: 100vw;
}
.healthCode {
  position: relative;
  width: 80vw;
  margin: auto;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  padding: 0 5vw 5vw 5vw;
  border-radius: 15px;
  background-color: white;
  text-align: center;
}
.healthCode img {
  display: block;
  width: 50vw;
  height: 50vw;
  margin: 15px auto;
}
.imgbox {
  display: block;
  width: 50vw;
  height: 50vw;
  margin: 15px auto;
}
.bottomText {
  width: 90vw;
  margin: auto;
  text-align: center;
  color: #959595;
}
</style>